<template>
  <view class="all-center">
    <!-- <uni-nav-bar  title="累计积分" dark  :fixed="true" left-icon="left" :left-text="true"  /> -->
    <intake-nav-bar title="累计积分" dark :fixed="true" color="#fff"/>
    <view v-if="dataMonth.length < 1" class="ac mt200 empty-style">
      <view class="fs28 name-color">暂无数据</view>
    </view>
    <view class="all-box  bgcfff br-14 mt30">
      <view :key="key" v-for="(m, key) in dataMonth" >
        <view  >
          <view class="box-title ac">
            <text> {{m.date}}数据详情</text>
          </view>
          <view class="all-box-slider">
            <view class="all-box-item" :key="key" v-for="(item, key) in m.data" >
              <view class="box-item">
                <view class="title">{{item.title}}</view>
                <view class="code">{{$common.parseFloatFixed(item.score)}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="water flex">
          <view class="water-info w-50 flex" @click="$common.navTo('/pages/users_purchasing/user_integral_accumulate/index')">
            <view class="water-title">水机数量</view>
            <view class="water-count" >{{m.count}}</view>
          </view>
          <view class=" water-info w-50 flex" style="border-left: 0.5rpx solid #fff;" @click="$common.navTo('/pages/users_purchasing/user_integral_accumulate/index')">
            <view class="water-title">总积分</view>
            <view class="water-count" >{{$common.parseFloatFixed(m.score_count)}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getAccumulateScoreLists} from "@/api/user/userScore";
export default {

  components: {
  },
  data() {

    return {
      dataitem:{
        shuiji:100,
        score:100
      },
      dataMonth:[],
    }
  },

  async onLoad() {
    this.getAccumulateScoreList()
  },
  methods: {

    sumFixed(num ){
      return   parseFloat(num).toFixed(2);
    },
    getAccumulateScoreList(){
      let that = this;
      getAccumulateScoreLists().then(res=>{
        that.dataMonth = res.data;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.all-center{
  background: url($baseBgImage) no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh; /* 使用视口高度，确保元素高度充满整个屏幕 */
  justify-content: center;
  background-size: cover; /* 使背景图片覆盖整个元素 */
  padding: 0rpx 30rpx;
  .all-box {
    .yesmonth {
      border: solid;
      background: #fff;
    }
  }
  .box-title {
    text-align: center;
    font-size: 35rpx;
    padding: 20rpx;
    font-weight: 550;
    margin: 10rpx 0;
  }
  .all-box-slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 30rpx;
    .all-box-item {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #E2E9FB;
      border-radius: 15rpx;
      text-align: center;
      margin: 6rpx;
      // padding: 0 5rpx;
      .box-item{
        padding: 10rpx;
        font-family: MiSans-Regular;
        font-weight: 500;
        .title{
          font-size: 24rpx;
        }
        .code{
          color: #0851fd;
          font-size: 20rpx;
          font-weight: 600;
        }
      }
    }
  }
  .box-slider {
    padding: 10rpx 0;
    display: flex;
    flex-wrap: wrap;
    .slider-item {
      position: absolute;
      display: block;
      background-color: #e2e9fb;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      //width: 13.28%;
      width: 95rpx;
      height: 95rpx;
      text-align: center;
      font-size: 28rpx;
      margin: 0.5rpx;
    }
  }
  .water{
    height: 103rpx;
    background: #0851fd;
    border-radius: 0 0 15rpx 15rpx ;
    font-family: 'MiSans-Regular';
    font-weight: 400;
    font-size:33rpx;
    color: #fff;
    padding: 15rpx;
    .water-info{
      position: relative;
      justify-content: center;
      .water-title{
        padding: 14rpx 30rpx;
      }
      .water-count{
        padding: 14rpx 0rpx;
      }
    }
  }
}
</style>
